<!--
 * @Description: zzb
 * @Version: 0.0.1
 * @Autor: zzb
 * @Date: 2021-11-25 11:18:33
 * @LastEditors: zzb
 * @LastEditTime: 2023-03-08 15:56:50
-->
<template>
  <div class="recycle_content">
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane
        :label="`等待我处理的文件列表(共${myworkInfo.taskInfoNum || 0}篇)`"
        lazy
        name="one"
      >
        <One
          v-if="activeName == 'one'"
          ref="one"
          :articleStatusOption="articleStatusOption"
        ></One>
      </el-tab-pane>
      <el-tab-pane
        :label="`已标记为待发布的文件列表(共${
          myworkInfo.waitPubInfoNum || 0
        }篇)`"
        lazy
        name="two"
      >
        <Two
          v-if="activeName == 'two'"
          :articleStatusOption="articleStatusOption"
        ></Two>
      </el-tab-pane>
      <el-tab-pane
        :label="`我的草稿文件列表(共${myworkInfo.dragInfoNum || 0}篇)`"
        lazy
        name="three"
      >
        <Three
          v-if="activeName == 'three'"
          :articleStatusOption="articleStatusOption"
        ></Three>
      </el-tab-pane>
      <el-tab-pane
        :label="`我的退稿文件列表(共${myworkInfo.backInfoNum || 0}篇)`"
        lazy
        name="four"
      >
        <Four
          v-if="activeName == 'four'"
          :articleStatusOption="articleStatusOption"
        ></Four>
      </el-tab-pane>
      <el-tab-pane :label="`处理过的文章列表`" lazy name="five">
        <Five
          v-if="activeName == 'five'"
          :articleStatusOption="articleStatusOption"
        ></Five>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getMyworkInfo } from "@/api/content/mywork";
import One from "./components/one";
import Two from "./components/two";
import Three from "./components/three";
import Four from "./components/four";
import Five from "./components/five.vue";
import { refreshRouteArr } from "@/settings.js";
import Tour from "@/components/tour/index.vue";

import { articleStatusList } from "@/api/content/article";
export default {
  name: "Mywork",
  data() {
    return {
      activeName: undefined,
      myworkInfo: {},
      articleStatusOption: [],
    };
  },

  components: { One, Two, Three, Four, Five, Tour },

  computed: {},
  created() {},
  mounted() {
    this.getWorkInfo();
    this.$nextTick(() => {
      this.activeName = "one";
    });
    this.getArticleStatus();
    document.addEventListener("visibilitychange", this.Fnrefresh);
  },
  destroyed() {
    document.removeEventListener("visibilitychange", this.Fnrefresh);
  },
  methods: {
    getWorkInfo() {
      getMyworkInfo().then((res) => {
        this.myworkInfo = res.data;
      });
    },
    // 获取文章状态
    getArticleStatus() {
      this.getDicts("article_status").then((response) => {
        this.articleStatusOption = response.data;
      });

      articleStatusList().then((res) => {
        console.log("res: ", res);
        let object = res.data;
        let data = [];
        for (const key in object) {
          if (Object.hasOwnProperty.call(object, key)) {
            const item = object[key];
            data.push({
              dictLabel: item,
              dictSort: key,
              dictType: "article_status",
              dictValue: String(key),
              remark: item,
              status: key,
            });
          }
        }

        this.articleStatusOption = data;
      });
    },
    Fnrefresh() {
      let route = this.$route.path;
      if (!document.hidden) {
        if (refreshRouteArr.includes(route)) {
          this.getWorkInfo();
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.recycle_content {
  height: 100%;
}
::v-deep .el-tabs__content {
  height: calc(100% - 40px);
  overflow: auto;
  .el-tab-pane {
    height: 100%;
    .mywork_two {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
